<template>
    <div class="showjob-color">
        <div>
            <el-tabs type="border-card" class="showjob">
                <el-tab-pane label="智能匹配"></el-tab-pane>
                <el-tab-pane label="薪资最高"></el-tab-pane>
                <el-tab-pane label="最新发布"></el-tab-pane>
                <el-table
                        ref="multipleTable"
                        :data="tableData1"
                        tooltip-effect="dark"
                        @selection-change="handleSelectionChange"
                        style="width: 100%">
                    <el-table-column
                            type="selection"
                            width="55">
                    </el-table-column>
                    <el-table-column
                            prop="jobName"
                            label="职位">
                    </el-table-column>
                    <el-table-column
                            prop="jobIndustry"
                            label="行业">
                    </el-table-column>
                    <el-table-column
                            prop="jobPay"
                            label="薪资">
                    </el-table-column>
                    <el-table-column
                            prop="jobAddress"
                            label="工作地点">
                    </el-table-column>
                    <el-table-column
                            prop="jobEdu"
                            label="学历">
                    </el-table-column>
                    <el-table-column
                            prop="jobExpr"
                            label="经验">
                    </el-table-column>
                    <el-table-column
                            prop="jobCompany"
                            label="公司">
                    </el-table-column>
                    <el-table-column
                            prop="jobDate"
                            label="发布时间"
                            :formatter="dateFormatter">
                    </el-table-column>
                    <el-table-column
                            label="操作"
                            width="200"
                            fixed="right">
                        <template slot-scope="scope">
                            <el-button
                                    size="mini"
                                    @click="add(scope.$index, scope.row)">收藏
                            </el-button>
                            <el-button
                                    size="mini"
                                    @click="apply(scope.$index, scope.row)">申请职位
                            </el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </el-tabs>
        </div>
    </div>
</template>

<script>
    export default {
        name: 'showjob',
        data() {
            return {
                tableData1: [],
                multipleSelection: []
            }
        },
        methods: {
            handleSelectionChange(val) {
                this.multipleSelection = val;
            },
            dateFormatter (row) {
                let datetime = row.resumeBirth;
                if (datetime) {
                    datetime = new Date(datetime);
                    let y = datetime.getFullYear() + '-';
                    let mon = datetime.getMonth() + 1 + '-';
                    let d = datetime.getDate();
                    return y + mon + d;
                }
                return ''
            },
            add(index, row) {
                var params = new URLSearchParams();
                params.append('jobid', row.jobId)
                params.append('userid', this.$store.state.user)
                this.axios.post('http://localhost:8001/userfavorites/add', params).then((res) => {
                    if (res.data.status === 200) {
                        // alert('账号或密码错误');
                        this.$message({
                            showClose: true,
                            message: res.data.msg,
                            type: 'success'
                        });
                    } else {
                        this.$message({
                            showClose: true,
                            message: res.data.msg,
                            type: 'error'
                        });
                    }
                }).catch((err) => {
                    this.$message({
                        showClose: true,
                        message: '请先用户登录',
                        type: 'error'
                    });
                    console.log('error' + err);
                })
            },
            apply(index, row) {
                var params = new URLSearchParams();
                params.append('jobid', row.jobId)
                params.append('compid',row.compId)
                params.append('userid', this.$store.state.user)
                console.log(this.$store.state.user)
                this.axios.post('http://localhost:8001/compReResume/add', params).then((res) => {
                    if (res.data.status === 200) {
                        this.$message({
                            showClose: true,
                            message: res.data.msg,
                            type: 'success'
                        });
                    } else {
                        this.$message({
                            showClose: true,
                            message: res.data.msg,
                            type: 'error'
                        });
                    }
                }).catch((err) => {
                    this.$message({
                        showClose: true,
                        message: '请先用户登录',
                        // message: res.data.msg,
                        type: 'error'
                    });
                    console.log('error' + err);
                })
            }
        },
        mounted() {
            this.axios.get('http://localhost:8001/compjob/getjobs').then((res) => {
                console.log(res.data);
                this.tableData1 = res.data;
            })
        },
    }
</script>
<style>
    .showjob-color {
        display: flex;
        flex-direction: row;
        justify-content: center;
        background-color: #F3F5F8;
        width: 100%;
        padding-bottom: 15px;
    }

    .showjob {
        width: 1100px;
        /*margin-left: 15%;*/
        box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.1);
        background-color: white;
    }


</style>
